<!DOCTYPE html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The sidebar navigation uses a jQuery component called Navgoco. The sidebar is a somewhat complex part of the theme that remembers your current page, highligh...">
<meta name="keywords" content="getting_started,  sidebar, accordion, yaml, iteration, for loop, navigation, attributes, conditional filtering">
<title>Sidebar Navigation | 常见故障解决方案</title>
<link rel="stylesheet" href="css/syntax.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min-4.5.0.css">
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/modern-business.css">
<link rel="stylesheet" href="css/lavish-bootstrap.css">
<link rel="stylesheet" href="css/customstyles.css">
<link rel="stylesheet" href="css/theme-blue.css">


<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.navgoco.min.js"></script>


<script src="js/bootstrap.min.js"></script>
<script src="js/anchor.min.js"></script>
<script src="js/toc.js"></script>
<script src="js/customscripts.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="" href="feed.xml">

    <script>
        $(document).ready(function() {
            // Initialize navgoco with default options
            $("#mysidebar").navgoco({
                caretHtml: '',
                accordion: true,
                openClass: 'active', // open
                save: false, // leave false or nav highlighting doesn't work right
                cookie: {
                    name: 'navgoco',
                    expires: false,
                    path: '/'
                },
                slide: {
                    duration: 400,
                    easing: 'swing'
                }
            });

            $("#collapseAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', false);
            });

            $("#expandAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', true);
            });

        });

    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    

</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container topnavlinks">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> 常见故障解决方案</span></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!-- entries without drop-downs appear here -->
                
                
                
                <li><a href="index.html">重新搜索</a></li>
                
                
                
                <!-- entries with drop-downs appear here -->
                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                
                
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他文档入口<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        
                        
                        <li><a href="index.html">常见故障解决方案</a></li>
                        
                        
                        
                        <li><a href="p1_sample1.html">常用语法</a></li>
                        
                        
                    </ul>
                </li>
                
                
                
			<li><a class="email" title="问题反馈" href="#" onclick="javascript:window.location='mailto:Merlin_Wu@apllogistics.com?subject=《常见故障解决方案》反馈&body=%0D____________________________________________________________________%0D问题页面：%09Sidebar Navigation %0D问题地址：%09' + window.location.href;"><i class="fa fa-envelope-o"></i> 邮件反馈</a><li>

		
                <!--comment out this block if you want to hide search-->
                <li>
                    <!--start search-->
                    <!-- <div id="search-demo-container">
                        <input type="text" id="search-input" placeholder="search...">
                        <ul id="results-container"></ul>
                    </div>
                    <script src="js/jekyll-search.js" type="text/javascript"></script>
                    <script type="text/javascript">
                            SimpleJekyllSearch.init({
                                searchInput: document.getElementById('search-input'),
                                resultsContainer: document.getElementById('results-container'),
                                dataSource: 'search.json',
                                searchResultTemplate: '<li><a href="{url}" title="Sidebar Navigation">{title}</a></li>',
                    noResultsText: 'No results found.',
                            limit: 10,
                            fuzzy: true,
                    })
                    </script> -->
                    <!--end search-->
                </li>
            </ul>
        </div>
        </div>
        <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">
    <div class="col-lg-12">&nbsp;</div>
    <!-- Content Row -->
    <div class="row">
        <!-- Sidebar Column -->
        <div class="col-md-3">

          












<!--  -->


<ul id="mysidebar" class="nav">
    <li class="sidebarTitle">目录 </li>
    
    
    
        
    
    <li>
        <a href="#">常用操作</a>
        <ul>
            
            
            
            <li><a href="index.html">搜索</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_introduction.html">Introduction</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_supported_features.html">Supported features</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_about.html">About the theme author</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_support.html">Support</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Release Notes</a>
        <ul>
            
            
            
            <li><a href="mydoc_release_notes_60.html">6.0 Release notes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_release_notes_50.html">5.0 Release notes</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Installation</a>
        <ul>
            
            
            
            <li><a href="mydoc_about_ruby_gems_etc.html">About Ruby, Gems, Bundler, etc.</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_mac.html">Install Jekyll on Mac</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_windows.html">Install Jekyll on Windows</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Authoring</a>
        <ul>
            
            
            
            <li><a href="mydoc_pages.html">Pages</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_posts.html">Posts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_lists.html">Lists</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_conditional_logic.html">Conditional logic</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_content_reuse.html">Content reuse</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_collections.html">Collections</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_webstorm_text_editor.html">WebStorm editor tips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_atom_text_editor.html">Atom editor tips</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Navigation</a>
        <ul>
            
            
            
            <li class="active"><a href="mydoc_sidebar_navigation.html">Sidebar navigation</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_yaml_tutorial.html">YAML tutorial in the context of Jekyll</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tags.html">Tags</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_series.html">Series</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Formatting</a>
        <ul>
            
            
            
            <li><a href="mydoc_adding_tooltips.html">Tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_alerts.html">Alerts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_icons.html">Icons</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_images.html">Images</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_code_samples.html">Code samples</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_labels.html">Labels</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_hyperlinks.html">Links</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_navtabs.html">Navtabs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tables.html">Tables</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_syntax_highlighting.html">Syntax highlighting</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_workflow_maps.html">Workflow maps</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Handling reviews</a>
        <ul>
            
            
            
            <li><a href="mydoc_commenting_on_files.html">Commenting on files</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Publishing</a>
        <ul>
            
            
            
            <li><a href="mydoc_build_arguments.html">Build arguments</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_themes.html">Themes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_generating_pdfs.html">Generating PDFs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_help_api.html">Help APIs and UI tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_search_configuration.html">Search configuration</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_iterm_profiles.html">iTerm profiles</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_push_build_to_server.html">Pushing builds to server</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_no_password_prompts_scp.html">Getting around the password prompts in SCP</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_publishing_github_pages.html">Publishing on Github Pages</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Special layouts</a>
        <ul>
            
            
            
            <li><a href="mydoc_kb_layout.html">Knowledge-base layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_glossary.html">Glossary layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_faq_layout.html">FAQ layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_scroll.html">Scroll layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_shuffle.html">Shuffle layout</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Troubleshooting</a>
        <ul>
            
            
            
            <li><a href="mydoc_troubleshooting.html">Troubleshooting</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Tag archives</a>
        <ul>
            
            
            
            <li><a href="mydoc_tag_archives_overview.html">Tag archives overview</a></li>
            
            
            
            <li class="subfolders">
                <a href="#">Tag archive pages</a>
                <ul>
                    
                    
                    
                    <li><a href="tag_formatting.html">Formatting pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_navigation.html">Navigation pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_content_types.html">Content types pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_publishing.html">Publishing pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_special_layouts.html">Special layout pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_collaboration.html">Collaboration pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_troubleshooting.html">Troubleshooting pages</a></li>
                    
                    
                    
                </ul>
            </li>
            
            
            
            
        </ul>
        
        
        
        <!-- if you aren't using the accordion, uncomment this block:
           <p class="external">
               <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
           </p>
           -->
    </li>
</ul>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>

    <!-- Content Column -->
    <div class="col-md-9">
        <div class="post-header">
   <h1 class="post-title-main">Sidebar Navigation</h1>
</div>



<div class="post-content">

   
    <div class="summary">The sidebar navigation uses a jQuery component called Navgoco. The sidebar is a somewhat complex part of the theme that remembers your current page, highlights the active item, stays in a fixed position on the page, and more. This page explains a bit about how the sidebar was put together.</div>
   

    
    
<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
$( document ).ready(function() {
  // Handler for .ready() called.

$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });

/* this offset helps account for the space taken up by the floating toolbar. */
$('#toc').on('click', 'a', function() {
  var target = $(this.getAttribute('href'))
    , scroll_target = target.offset().top

  $(window).scrollTop(scroll_target - 10);
  return false
})
  
});
</script>

<div id="toc"></div>

    

    

    

    

  <h2 id="navgoco-foundation">Navgoco foundation</h2>

<p>The sidebar uses the <a href="https://github.com/tefra/navgoco">Navgoco jQuery plugin</a> as its basis. Why not use Bootstrap? Navgoco provides a few features that I couldn’t find in Bootstrap:</p>

<ul>
  <li>Navgoco sets a cookie to remember the user’s position in the sidebar. If you refresh the page, the cookie allows the plugin to remember the state.</li>
  <li>Navgoco inserts an <code class="highlighter-rouge">active</code> class based on the navigation option that’s open. This is essential for keeping the accordion open.</li>
  <li>Navgoco includes the expand and collapse features of a sidebar.</li>
</ul>

<p>In short, the sidebar has some complex logic here. I’ve integrated Navgoco’s features with the sidebar.html and sidebar data files to build the sidebar. It’s probably the most impressive part of this theme. (Other themes usually aren’t focused on creating hierarchies of pages, but this kind of hierarchy is important in a documentation site.)</p>

<h2 id="accordion-sidebar-feature">Accordion sidebar feature</h2>

<p>The sidebar.html file (inside the _includes folder) contains the <code class="highlighter-rouge">.navgoco</code> method called on the <code class="highlighter-rouge">#mysidebar</code> element.</p>

<p>There are some options to set within the <code class="highlighter-rouge">.navgoco</code> method. The only noteworthy option is <code class="highlighter-rouge">accordion</code>. This option makes it so when you expand a section, the other sections collapse. It’s a way of keeping your navigation controls condensed.</p>

<p>The value for <code class="highlighter-rouge">accordion</code> is a Boolean (<code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code>). By default, the <code class="highlighter-rouge">accordion</code> option is set as <code class="highlighter-rouge">true</code>. If you don’t want the accordion, set it to <code class="highlighter-rouge">false</code>. Note that there’s also a block of code near the bottom of sidebar.html that is commented out. Uncomment out that section to have the Collapse all and Expand All buttons appear.</p>

<p>There’s a danger with setting the accordion to <code class="highlighter-rouge">false</code>. If you click Expand All and the sidebar expands beyond the dimensions of the browser, users will be stuck. When that happens, it’s hard to collapse it. As a best practice, leave the sidebar’s accordion option set to <code class="highlighter-rouge">true</code>.</p>

<h2 id="fixed-position-sidebar">Fixed position sidebar</h2>

<p>The sidebar has one other feature — this one from Bootstrap. If the user’s viewport is tall enough, the sidebar remains fixed on the page. This allows the user to scroll down the page and still keep the sidebar in view.</p>

<p>In the customsscripts.js file in the js folder, there’s a function that adds an <code class="highlighter-rouge">affix</code> class if the height of the browser window is greater than 800 pixels. If the browser’s height is less than 800 pixels, the <code class="highlighter-rouge">nav affix</code> class does not get inserted. As a result, the sidebar can slide up and down as the user scrolls up and down the page.</p>

<p>Depending on your content, you may need to adjust <code class="highlighter-rouge">800</code> pixel number. If your sidebar is so long that having it in a fixed position makes it so the bottom of the sidebar gets cut off, increase the <code class="highlighter-rouge">800</code> pixel number here to a higher number.</p>

<h2 id="opening-sidebar-links-into-external-pages">Opening sidebar links into external pages</h2>

<p>In the attributes for each sidebar item, if you use <code class="highlighter-rouge">external_url</code> instead of <code class="highlighter-rouge">url</code>, the theme will insert the link into an <code class="highlighter-rouge">a href</code> element that opens in a blank target.</p>

<p>For example, the sidebar.html file contains the following code:</p>

<div class="language-liquid highlighter-rouge"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">external_url</span><span class="w"> </span><span class="p">%}</span>
    &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">external_url</span><span class="p">}}</span>" target="_blank"&gt;<span class="p">{{</span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;```


You can see that the `external_url` is a condition that applies a different formatting. Although this feature is available, I recommend putting any external navigation links in the top navigation bar instead of the side navigation bar.

## Sidebar item highlighting

The sidebar.html file inserts an `active` class into the sidebar element when the `url` attribute in the sidebar data file matches the page URL.

For example, the sidebar.html file contains the following code:


```liquid
<span class="p">{%</span><span class="w"> </span><span class="kr">elsif</span><span class="w"> </span><span class="nv">page</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">%}</span>
   &lt;li class="active"&gt;&lt;a href="<span class="p">{{</span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">remove</span><span class="p">:</span><span class="w"> </span><span class="s2">"/"</span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="nv">folderitem</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span>&lt;/a&gt;&lt;/li&gt;
</code></pre>
</div>

<p>If the <code class="highlighter-rouge">page.url</code> matches the <code class="highlighter-rouge">subfolderitem.url</code>, then an <code class="highlighter-rouge">active</code> class gets applied. If not, the <code class="highlighter-rouge">active</code> class does not get applied.</p>

<p>The <code class="highlighter-rouge">page.url</code> in Jekyll is a site-wide variable. If you insert <code class="highlighter-rouge"><span class="p">{</span><span class="err">{page.url</span><span class="p">}</span><span class="err">}</span></code> on a page, it will render as follows: /mydoc_sidebar_navigation.html. The <code class="highlighter-rouge">url</code> attribute in the sidebar item must match the page URL in order to get the <code class="highlighter-rouge">active</code> class applied.</p>

<p>This is why the <code class="highlighter-rouge">url</code> value in the sidebar data file looks something like this:</p>

<div class="language-yaml highlighter-rouge"><pre class="highlight"><code>    <span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Understanding how the sidebar works</span>
      <span class="s">permalink</span><span class="pi">:</span> <span class="s">mydoc_understand_sidebar.html</span>
      <span class="s">output</span><span class="pi">:</span> <span class="s">web, pdf</span>
</code></pre>
</div>

<p>Note that the url does not include the project folder where the file is stored. This is because the site uses permalinks, which pulls the topics out of subfolders and places them into the root directory when the site builds.</p>

<p>Now the page.url and the item.url can match and the <code class="highlighter-rouge">active</code> class can get applied. With the <code class="highlighter-rouge">active</code> class applied, the sidebar section remains open.</p>



    <div class="tags">
        
        <b>Tags: </b>
        
        
        
        <a href="tag_getting_started.html" class="btn btn-default navbar-btn cursorNorm" role="button">getting_started</a>
        
        
        
    </div>

    

</div>

<hr class="shaded"/>

<footer>
            <div class="row">
                <div class="col-lg-12 footer">
               &copy;2016 . All rights reserved. <br />
<span>Page last updated:</span> July 3, 2016<br/> Site last generated: Oct 8, 2016 <br />
<!-- <p><img src="images/company_logo.png" alt="Company logo"/></p> -->
                </div>
            </div>
</footer>


    </div>
    <!-- /.row -->
</div>
<!-- /.container -->
    </div>

</body>

</html>
